import React, { useEffect } from 'react';
import { Dropdown, Avatar, Menu, Icon, Layout, Tooltip } from 'antd';
import useLocalStorage from '../../hooks/useLocalStorage';
import { TENANT_STORAGE_KEY } from '../../utils/consts';
import logo from '../../assets/logo-base.png';
import download from '../../assets/icons/icon-download-base.png';
// import search from '../../assets/icons/icon-search.png';
// import warning from '../../assets/icons/icon-warning.png';
import styles from './TopHeader.less';

const { Header } = Layout;

const DropdownMenu = ({ menu, overlayStyle, menuName }) => (
  <Dropdown trigger="click" overlay={menu} overlayStyle={overlayStyle}>
    <a style={{ color: 'black', display: 'block', height: '100%' }} onClick={e => e.preventDefault()}>
      {menuName}
      <Icon type="down" />
    </a>
  </Dropdown>
);

const TopHeader = ({
  userInfo = {},
  onMenuClick,
  setMenu,
  menuType = 0,
  data = [],
  tenantList,
}) => {
  const [tenant, setTenant] = useLocalStorage(TENANT_STORAGE_KEY, {});

  // 如果用户ID切换，则清空缓存，采用默认列表中第一个租户执行业务
  // 如果用户ID未切换，则默认采用缓存中的租户执行业务，如果没有缓存则采用默认列表中第一个租户执行业务
  useEffect(() => {
    function handler(e) {
      const tenantFromEvent = e.newValue;
      // 如果从事件来源的 tenant 与当前缓存的 tenant 不一致，则接受新的 tenant 进入缓存
      if (JSON.stringify(tenant) !== tenantFromEvent) {
        setTenant(tenantFromEvent);
        window.location.reload();
      }
    }
    // 多页签间切换租户保持同步刷新
    window.onstorage = handler;
    if (tenantList && tenantList.length > 0) {
      const defaultTenant = tenantList[0];
      // 用户不同的情况：忽略缓存，使用登录用户列表的第一个
      if (defaultTenant.userId !== userInfo.userId) {
        setTenant(defaultTenant);
        window.location.reload();
        // 用户相同，但租户列表中不存在缓存的用户，使用登录用户列表的第一个
      } else if (tenantList.findIndex(item => item.id === tenant.id) === -1) {
        setTenant(defaultTenant);
        window.location.reload();
      } else {
        // 用户相同、且用户列表中有缓存中的租户时，不做处理
      }
    }
    return () => {
      window.onstorage = null;
    };
  }, [tenantList, userInfo, tenant]);

  const tenantMenu = (
    <Menu>
      {tenantList && tenantList.map(d => (
        <Menu.Item key={d.id}>
          <a className="ant-dropdown-link"
            onClick={() => {
              setTenant(d);
              window.location.reload();
            }}>{d.tenantName}</a>
        </Menu.Item>
      ))
      }
    </Menu >
  );
  const menu = (
    <Menu className={styles.menu} onClick={onMenuClick}>
      <Menu.Item key='userManager'>
        <Icon type='file-text' />
        个人信息管理
      </Menu.Item>
      <Menu.Item key='logout' className={styles.logout}>
        <Icon type='logout' />
        退出登录
      </Menu.Item>
    </Menu>
  );

  return (
    <Header className={styles.root}>
      <div className={styles.logo}>
        <img src={logo} alt='' />
        <span>消息中心</span>
      </div>
      <div className={styles.left}>
        {data.map((item, index) => (
          <span
            key={`topMenu_${index}`}
            className={menuType === item ? styles.Sel : styles.notSel}
            style={{ marginLeft: 8 }}
            onClick={() => setMenu(item)}
          >
            {item}
          </span>
        ))}
      </div>
      <div style={{ flex: 1 }} />
      <div className={styles.right}>
        <div className={styles.item}>
          <DropdownMenu menu={tenantMenu} overlayStyle={{ minWidth: 100 }} menuName={tenant.tenantName} />
        </div>
        <div className={styles.item}>
          <Tooltip placement='bottom' title='帮助文档下载'>
            {/* <Icon
              type='download'
              style={{ color: '#595959 ' }}
              onClick={() => setMenu('帮助文档')}
            /> */}
            <img src={download} width={20} onClick={() => setMenu('帮助文档')} />
          </Tooltip>
        </div>
        {/* <div className={styles.item}>
          <Icon type='search' style={{ color: '#595959 ' }} />
          <img src={search} width={18} />
        </div>
        <div className={styles.item}>
          <Icon type='bell' style={{ color: '#595959 ' }} />
          <img src={warning} width={18} />
        </div> */}
        <div className={styles.item}>
          <Dropdown overlay={menu} trigger={['click']}>
            <span className={styles.userBox}>
              <Avatar
                style={{ backgroundColor: '#87d068' }}
                className={styles.img}
                icon='user'
              />
              <span className={styles.name}>{userInfo.userName}</span>
            </span>
          </Dropdown>
        </div>
      </div>
    </Header>
  );
};

export default TopHeader;
